<script lang="ts" setup>
  import { computed } from 'vue';
  import { Card, Tabs, TabPane } from '@arco-design/web-vue';
  import { ChainItem } from '/@/components/ChainItem';

  import { queryArticlePage } from '/@/api/article';
  import { queryHotspotPage } from '/@/api/hotspot';
  // import type { CardDataGetResultModel } from '/@/api/model/creatorModel';

  import { ApiManageList } from '/@/components/ApiManageList';
  import { useUserStore } from '/@/store/modules/user';

  const userStore = useUserStore();
  const userInfo = computed(() => userStore.getUserInfo);

  // const cardData = ref<CardDataGetResultModel | null>(null);
  // (async () => {
  //   cardData.value = await queryCardData({
  //     datas: [
  //       'all_follower',
  //       'all_article_display',
  //       'all_article_view',
  //       'all_article_digg',
  //       'all_article_comment',
  //       'all_article_collect',
  //     ],
  //   });
  // })();
  const cardData = computed(() => {
    return {
      all_follower: {
        cnt: userInfo.value?.follower ?? 0,
        than_before: 0,
      },
      all_article_display: {
        cnt: userInfo.value?.focus ?? 0,
        than_before: 0,
      },
      all_article_view: {
        cnt: userInfo.value?.focus ?? 0,
        than_before: 0,
      },
      all_article_digg: {
        cnt: userInfo.value?.focus ?? 0,
        than_before: 0,
      },
      all_article_comment: {
        cnt: userInfo.value?.recommend ?? 0,
        than_before: 0,
      },
      all_article_collect: {
        cnt: userInfo.value?.focus ?? 0,
        than_before: 0,
      },
    };
  });

  function onArticleEdit(item) {
    window.open(`/editor/drafts/${item.id}`, '_blank');
  }
  function onPinEdit(item) {
    window.open(`/editor/drafts/${item.id}`, '_blank');
  }
</script>

<template>
  <Card class="mb-[14px]" title="数据概览" hoverable>
    <div class="flex flex-wrap">
      <ChainItem title="总关注者数" :data="cardData?.all_follower" />
      <ChainItem title="文章展现数" :data="cardData?.all_article_display" />
      <ChainItem title="文章阅读数" :data="cardData?.all_article_view" />
      <ChainItem title="文章点赞数" :data="cardData?.all_article_digg" />
      <ChainItem title="文章评论数" :data="cardData?.all_article_comment" />
      <ChainItem title="文章收藏数" :data="cardData?.all_article_collect" />
    </div>
  </Card>
  <Card title="近期发布" hoverable>
    <Tabs>
      <TabPane key="article" title="文章">
        <ApiManageList
          :api="queryArticlePage"
          :getLink="(item) => `/post/${item.id}`"
          @edit="onArticleEdit"
        />
      </TabPane>
      <TabPane key="pin" title="沸点">
        <ApiManageList
          :api="queryHotspotPage"
          :getLink="(item) => `/pin/${item.id}`"
          :dropdownActionsType="['delete']"
          @edit="onPinEdit"
        />
      </TabPane>
    </Tabs>
  </Card>
</template>
